<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>功能演示</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: red;
      }

      .btn2 {
        position: fixed;
        z-index: 10000;
      }
    </style>
    <!-- <script src="./dist/DragResizeBox.min.js"></script> -->
  </head>
  <body>
    <div class="box"></div>
    <div>
      <button class="btn1">设置全屏</button>
      <button class="btn2">退出全屏</button>
    </div>

    <div>
      <button class="btn3">设置最小宽高: 100×100</button>
      <button class="btn4">移除resize事件</button>
    </div>

    <script type="module">
      import DragResizeBox from "./dist/DragResizeBox.esm.js";

      const boxEl = document.querySelector(".box");
      const btn1El = document.querySelector(".btn1");
      const btn2El = document.querySelector(".btn2");
      const btn3El = document.querySelector(".btn3");
      const btn4El = document.querySelector(".btn4");
      const dragResizeBox = new DragResizeBox(boxEl, {
        left: 100,
        top: 100,
        drag: true
      });

      dragResizeBox.addEventListener("resize", (event) => {
        console.log(event.name);
        console.log(event.data);
      });

      btn1El.addEventListener("click", () => {
        console.log(dragResizeBox);
        dragResizeBox.setFullScreen();
      });

      btn2El.addEventListener("click", () => {
        dragResizeBox.exitFullScreen();
      });

      btn3El.addEventListener("click", () => {
        dragResizeBox.setMinWidth(100);
        dragResizeBox.setMinHeight(100);
      });

      btn4El.addEventListener("click", () => {
        dragResizeBox.removeEventListener("resize");
      });
    </script>
  </body>
</html>
